<script setup>
import { Edit, RefreshRight } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'
import { ref, inject, reactive } from 'vue'
//引入axios
const axios = inject('axios')

//控制父页面、子页面的显示
const visiblity = ref(true)

//主页数据
const Mydata = reactive({
  "equipmentRepairTasks": []
})

//发送请求时的附带数据
const Data = reactive({
  "conditions": { "equipmentName": "", "startDate": "", "endDate": "" }
})

//按起止日期、设备类型获取主页数据
function selectData1() {
  console.log("Data:")
  console.log(Data)
  axios({
    method: 'post',
    url: '/api/equipmentRepairTasks/select1',
    data: Data.conditions
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.equipmentRepairTasks != null) {
        Mydata.equipmentRepairTasks = response.data.map.equipmentRepairTasks
        console.log("result:")
        console.log(response.data.map)
        console.log("Mydata.equipmentRepairTasks:")
        console.log(Mydata.equipmentRepairTasks)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无设备维修信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}

//获取主页的数据
function selectData() {
  axios({
    method: 'post',
    url: '/api/equipmentRepairTasks/selectAll',
  }).then((response) => {
    console.log(response.data)
    if (response.data.success) {
      if (response.data.map.equipmentRepairTasks != null) {
        Mydata.equipmentRepairTasks = response.data.map.equipmentRepairTasks
        console.log("result:")
        console.log(response.data.map)
        console.log("Mydata.equipmentRepairTasks:")
        console.log(Mydata.equipmentRepairTasks)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无设备维护任务信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}
selectData()

//子页面数据
const sonData = reactive({
  "data": {
    "repairEquipment": " ",
    "requestMaintenanceTime": " ",
    "maintenanceStartTime": " ",
    "maintenanceEndTime": " ",
    "historicalRepairInformation": " ",
    "textarea": " "
  }
})

//管理子页面的显示
const editdialogFormVisible = ref(false)


//按设备编号获取子页面的数据并显示子页面
function selectDataOfSonPage(equipmentNo) {
  console.log("equipmentNo:" + equipmentNo)
  axios({
    method: 'post',
    url: '/api/equipmentRepairTasks/selectByEquipmentNo?equipmentNo=' + equipmentNo,
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.equipmentRepairTasksVO != null) {
        sonData.data.repairEquipment = response.data.map.equipmentRepairTasksVO[0].repairEquipment
        sonData.data.requestMaintenanceTime = response.data.map.equipmentRepairTasksVO[0].requestMaintenanceTime
        sonData.data.maintenanceStartTime = response.data.map.equipmentRepairTasksVO[0].maintenanceStartTime
        sonData.data.maintenanceEndTime = response.data.map.equipmentRepairTasksVO[0].maintenanceEndTime
        sonData.data.historicalRepairInformation = response.data.map.equipmentRepairTasksVO[0].historicalRepairInformation
        console.log("result:")
        console.log(response.data.map)
        console.log("sonData:")
        console.log(sonData)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无首检信息！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
  //显示子页面
  editdialogFormVisible.value = true
}

//表单序号自增
const indexMethod = (index) => {
  return index + 1
}



</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;" v-if="visiblity">
    <el-col :span="24" style="margin-left: 10px;">
      <h3>
        设备维修任务列表
      </h3>
      <!-- 功能按钮 -->
      <el-row class="row2" style="margin: 0px 24px 10px;">
        <el-col :span="24" class="col2">
          <el-row>
            <el-col :span="3">
              <el-button :icon="RefreshRight">刷新</el-button>
            </el-col>
            <el-col :span="5">
              <el-date-picker v-model="Data.conditions.startDate" type="date" placeholder="任务创建开始日期" />
            </el-col>
            <el-col :span="5">
              <el-date-picker v-model="Data.conditions.endDate" type="date" placeholder="任务创建结束日期" />
            </el-col>
            <el-col :span="7">
              <el-input v-model="Data.conditions.equipmentName" class="input" placeholder="请输入设备名称" clearable>
              </el-input>
            </el-col>
            <el-col :span="3" style="margin-left: 5px;">
              <el-button size="middle" type="success" @click="selectData1">
                搜索
              </el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row style="background-color:white;margin:0 10px 0 10px">
        <el-col :span="24" style="margin-top:15px">
          <!--:data为测试数据，可对应数据库修改  stripe斑马纹效果 border带边框 -->
          <el-table :data="Mydata.equipmentRepairTasks" stripe border style="width:100%">
            <!-- 定义列表属性 prop值可对于数据库字段名修改-->
            <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="60px"></el-table-column>
            <el-table-column label="任务创建时间" align="center" prop="taskCreationTime" width="320px" />
            <el-table-column label="维修设备" align="center" prop="repairEquipment" width="170px" />
            <el-table-column label="维修状态" align="center" prop="repairStatus" width="140px" />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button type="primary" :icon="Edit" size="small"
                  @click="selectDataOfSonPage(scope.row.repairEquipment)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 编辑子页面 -->
      <el-dialog v-model="editdialogFormVisible" title="填写设备维护信息" class="editPage" center>
        <!-- 维修设备编号 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>维修设备编号</span>
          </el-col>
          <el-col :offset="1" :span="18">
            <span>{{ sonData.data.repairEquipment }}</span>
          </el-col>
        </el-row>
        <!-- 申请维修时间 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>申请维修时间</span>
          </el-col>
          <el-col :offset="1" :span="18">
            <span>{{ sonData.data.requestMaintenanceTime }}</span>
          </el-col>
        </el-row>
        <!-- 维护开始时间 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>维修开始时间</span>
          </el-col>
          <el-col :offset="1" :span="18">
            <span>{{ sonData.data.maintenanceStartTime }}</span>
          </el-col>
        </el-row>
        <!-- 维护完成时间 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>维护完成时间</span>
          </el-col>
          <el-col :offset="1" :span="18">
            <span>{{ sonData.data.maintenanceEndTime }}</span>
          </el-col>
        </el-row>
        <!-- 历史维护信息 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>历史维护信息</span>
          </el-col>
          <el-col :offset="1" :span="18">
            <pre style="font-size: 18px;font-weight:600">{{ sonData.data.historicalRepairInformation }}</pre>
          </el-col>
        </el-row>
        <!-- 维护信息 -->
        <el-row>
          <el-col :offset="1" :span="4" class="left">
            <span>维护信息</span>
          </el-col>
          <el-col :offset="1" :span="18" class="left">
            <el-form>
              <el-form-item :label-width="formLabelWidth">
                <el-input v-model="textarea" :rows="5" type="textarea" placeholder="在此处填写您本次的维护信息" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!-- 子页面按钮 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary">开始维修任务</el-button>
            <el-button type="primary" disabled>保存维修信息</el-button>
            <el-button @click="editdialogFormVisible = false">返回</el-button>
            <el-button type="primary">完成维修任务</el-button>
          </span>
        </template>
      </el-dialog>
    </el-col>
  </el-row>
</template>
<style scoped>
.row2 {
  padding-top: 40px;
}

.editPage span {
  font-size: 16px;
}

.editPage .el-row {
  margin-top: 15px;
}

.editPage .left span {
  color: blue;
}

::v-deep .el-textarea__inner {
  font-size: 16px;
}
</style>